<template>
  <section  v-if="!widget">
    没有选中控件
  </section>
  <section v-else>
    <div v-if="widget.code === 'null-space'">
      <div>{{widget.description}}</div>
      <div>
        <el-input size="mini" v-model="widget.config.height" placeholder="请输入空白行高度" style="width: 100px"></el-input>
      </div>
    </div>
    <div v-else-if="widget.code === 'score-grade'">
      <el-form label-width="40px" size="mini">
        <el-form-item label="简介"><div>{{widget.description}}</div></el-form-item>
        <el-form-item label="目标">
          <el-checkbox-group v-model="widget.data.target">
            <el-checkbox :label="t.code" v-for="(t,i) in targetList" :key="i">{{t.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="详情">
          <el-button size="mini" @click="addVal('${score}')">分数</el-button>
          <el-button size="mini" @click="addVal('${percentNum}')">指数</el-button>
          <el-button size="mini" @click="addVal('${grade}')">等级</el-button>
          <el-button size="mini" @click="addVal('${name}')">名称</el-button>
          <el-button size="mini" @click="addVal('${desc}')">描述</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      其他挂件----------
    </div>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "index",
    props:['widget'],
    data(){
      return{
        targetList:[
          {name:'湿气',code:'shiqi'},
          {name:'木郁',code:'muyu'},
        ]
      }
    },
    computed:{
    },
    created(){
      console.log('看下当前挂件',this.widget)
    },
    watch:{
      widget(nv,ov){
        // console.log('捕捉变动-------',nv)
      },
      test(nv,ov){
        console.log('捕捉-------',nv)
      }
    },
    methods:{
      addVal(e){
        let ctrl=document.getElementById(this.widget.uuid)
        let position = this.getPosition(ctrl)
        if (typeof document.selection != "undefined") {
          document.selection.createRange().text = e
        }else {
          let newVal
          if(!this.widget.config.val){
            newVal =  e
          }else {
            newVal = this.widget.config.val.substr(0,position) + e +this.widget.config.val.substring(position, this.widget.config.val.length)
          }
          Vue.set(this.widget.config,'val',newVal)
        }

        console.log('到哪了')
        ctrl.focus()
        // console.log('??????????',document.getElementById('inputbox').val)
      },

      getPosition(ctrl){
        let CaretPos = 0;
        if(document.selection) {// IE Support
          ctrl.focus();
          let Sel = document.selection.createRange();
          let SelSel2 = Sel.duplicate();
          Sel2.moveToElementText(ctrl);
          CaretPos = -1;
          while(Sel2.inRange(Sel)){
            Sel2.moveStart('character');
            CaretPos++;
          }
        }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support
          CaretPos = ctrl.selectionStart;
        }
        return CaretPos
      }
    }
  }
</script>

<style scoped>

</style>
